<style lang="less">
	page{
		background: #f6f6f6;
		padding-bottom: 50upx;
	}
	.content {
		// text-align: center;
	}
	.main-top{
		background: #FFFFFF;
		box-sizing: border-box;
		position: relative;
		text-align: center;
		.bj{
			display: block;
			width: 100%;
		}
		.main-top-pos{
			position: absolute;
			top: 40upx;
			left: 0;
			width: 100%;
			overflow: hidden;
			padding:0 60upx;
			box-sizing:border-box;
			.touxiang{
				width: 100upx;
				float: left;
				border-radius: 50%;
				height: auto;
			}
			.name{
				float: left;
				margin-left:20upx;
				text-align:left;
				overflow: hidden;
				.name-mingzi{
					font-size:30upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
				.name-mobile{
					font-size:24upx;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
				.memberTyp{
					line-height: 36upx;
					border: 2upx solid #000000;
					border-radius: 18upx;
					font-size: 20upx;
					font-weight: bold;
					color: #000000;
					padding: 0 20upx;
					margin-top: 10upx;
					float: left;
					box-sizing: border-box;
				}
				.memberImage{
					width: 250upx;
					height: auto;
				}
			}
			
		}
	}
	.erweima{
		float: right;
		width: 100upx;
		height: 100upx;
		max-height: 110upx;
		overflow: hidden;
	}
	.main-list{
		background: #FFFFFF;
		margin-bottom: 20upx;
		.main-list-title{
			padding: 30upx;
			box-sizing: border-box;
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 36upx;
		}
	}
	.main-list-cen{
		display: flex;
		flex-wrap: wrap;
		.main-list-cen-for{
			padding: 30upx 0;
			box-sizing: border-box;
			width: 25%;
			border-top: 1upx solid #EDEDED;
			border-right: 1upx solid #EDEDED;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&:nth-of-type(4n){
				border-right: none;
			}
			.num{
				font-size: 30upx;
				font-family: "DINCond";
				font-weight: 400;
				color: #333333;
				line-height: 48upx;
			}
			.name{
				font-size: 20upx;
				font-weight: 500;
				color: #999999;
				line-height: 29upx;
			}
			.qrcode{
				width: 62upx;
				height: 62upx;
			}
		}
	}
	.tab{
		display: flex;
		align-items: center;
		padding: 0 32upx;
		box-sizing: border-box;
		.tab_list{
			padding: 32upx 0;
			margin-right: 50upx;
			font-size: 26upx;
			font-weight: bold;
			color: #333333;
			line-height: 30upx;
			position: relative;
		}
		.tab_list_active{
			font-size: 30upx;
			color: #DAC191;
		}
		.tab_list_active::after{
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 46upx;
			height: 6upx;
			background: #DAC191;
		}
	}
	.foot{
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		padding: 32upx;
		box-sizing: border-box;
		.foot_fl{
			font-size: 28upx;
			font-weight: 500;
			color: #333333;
			line-height: 34upx;
		}
		.foot_img{
			width: 40upx;
			height: 40upx;
		}
	}
	//t弹出二维码
	.pos-img{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1000;
		.pos-img-bj{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1001;
			background: #000000;
			opacity: 0.3;
		}
		.pos-img-centent{
			position: absolute;
			z-index: 10002;
			width: 560upx;
			left: 50%;
			margin-left: -280upx;
			top: 18%;
			background: #FFFFFF;
			padding: 40upx 70upx;
			border-radius:12upx;
			box-sizing: border-box;
			.gundong{
				height: 500upx;
			}
			.pos-img-centent-img{
				width: 100%;
				height: auto;
				display: block;
			}
			.but{
				font-size:28upx;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:46upx;
				text-align: center;
				margin-top: 20upx;
			}
		}
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		margin-top: 20upx;
		width: 750upx;
		height: 540upx;
		background-color: #FFFFFF;
		padding: 20upx 0;
		.qiun-charts-title{
			text-align: center;
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:40upx;
		}
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
<template>
	<view class="content">
		<view class="main-top">
			<image src="/static/img/wdfs_bgpics.png" class="bj" mode="widthFix"></image>
			<view class="main-top-pos">
				<image v-if="myTeam.headIco!='' && myTeam.headIco!=null && myTeam.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+myTeam.headIco" class="touxiang" mode="widthFix" :webp="true"></image>
				<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="touxiang" mode="widthFix"></image>
				<view class="name">
					<view class="name-mingzi">{{myTeam.username}}</view>
					<view class="name-mobile">{{myTeam.mobile}}</view>
					<view v-if="grade!='' && grade!=null && grade!=undefined" class="memberTyp">{{grade}}</view>
				</view>
				<image v-if="myTeam.weChatCode!='' && myTeam.weChatCode!=null && myTeam.weChatCode!=undefined" @tap.stop="shareShow(0)" :src= "'https://static.xpandago.net'+'/'+myTeam.weChatCode" class="erweima"></image>
			</view>
		</view>
		<view class="pos-img" v-if="imgShow==true">
			<view class="pos-img-bj" @tap.stop="shareHide"></view>
			<view class="pos-img-centent">
				<scroll-view scroll-y="true" class="gundong">
					<image :src= "'https://static.xpandago.net'+'/'+img" class="pos-img-centent-img" mode="widthFix"></image>
				</scroll-view>
				<view class="but">长按识别二维码或保存至本地</view>
			</view>
		</view>
		<view class="main-info">
			<view class="main-list" v-if="myTeam.invite != '' && myTeam.invite != null && myTeam.invite != undefined">
				<view class="main-list-title">我的邀约人</view>
				<view class="main-list-cen">
					<view class="main-list-cen-for" v-if="myTeam.invite.userName != '' && myTeam.invite.userName != null && myTeam.invite.userName != undefined">
						<view class="num">{{myTeam.invite.userName}}</view>
						<view class="name">用户名</view>
					</view>
					<view class="main-list-cen-for" v-if="myTeam.invite.mobile != '' && myTeam.invite.mobile != null && myTeam.invite.mobile != undefined">
						<view class="num">{{myTeam.invite.mobile}}</view>
						<view class="name">手机号</view>
					</view>
					<view class="main-list-cen-for" v-if="myTeam.invite.code != '' && myTeam.invite.code != null && myTeam.invite.code != undefined">
						<view class="num">{{myTeam.invite.code}}</view>
						<view class="name">邀请码</view>
					</view>
					<view class="main-list-cen-for">
						<image v-if="myTeam.invite.parentUserWeChatCode != '' && myTeam.invite.parentUserWeChatCode != null && myTeam.invite.parentUserWeChatCode != undefined" @tap.stop="shareShow(1)" :src= "'https://static.xpandago.net'+'/'+myTeam.invite.parentUserWeChatCode" class="qrcode"></image>
						<view v-if="myTeam.invite.parentUserWeChatCode != '' && myTeam.invite.parentUserWeChatCode != null && myTeam.invite.parentUserWeChatCode != undefined" class="name">二维码</view>
					</view>
				</view>
			</view>
			<view class="main-list">
				<view class="main-list-title">团队粉丝</view>
				<view class="main-list-cen">
					<view class="main-list-cen-for" @tap="jumpTeam('serviceProvider')" v-if="grade == '总监'">
						<view class="num">{{myTeam.serviceProviderFans}}</view>
						<view class="name">服务商</view>
					</view>
					<view class="main-list-cen-for" @tap="jumpTeam('storeManager')" v-if="grade == '总监' || grade == '服务商'">
						<view class="num">{{myTeam.storeManagerFans}}</view>
						<view class="name">店长</view>
					</view>
					<view class="main-list-cen-for" @tap="jumpTeam('big')">
						<view class="num">{{myTeam.bigFans}}</view>
						<view class="name">88VIP</view>
					</view>
					<view class="main-list-cen-for" @tap="jumpTeam('middle')">
						<view class="num">{{myTeam.middleFans}}</view>
						<view class="name">92VIP</view>
					</view>
					<view class="main-list-cen-for" @tap="jumpTeam('small')">
						<view class="num">{{myTeam.smallFans}}</view>
						<view class="name">95VIP</view>
					</view>
					<view class="main-list-cen-for" @tap="jumpTeam('general')">
						<view class="num">{{myTeam.generalFans}}</view>
						<view class="name">注册会员</view>
					</view>
					<block v-if="grade != '店长'">
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for" v-if="grade != '总监'"></view>
					</block>
				</view>
			</view>
			<view class="main-list">
				<view class="tab">
					<view :class="['tab_list',tabInd == 0 ? 'tab_list_active' : '']" @tap="onTab(0)">今日新增</view>
					<view :class="['tab_list',tabInd == 1 ? 'tab_list_active' : '']" @tap="onTab(1)">昨日新增</view>
					<view :class="['tab_list',tabInd == 2 ? 'tab_list_active' : '']" @tap="onTab(2)">近7天新增</view>
					<view :class="['tab_list',tabInd == 3 ? 'tab_list_active' : '']" @tap="onTab(3)">本月新增</view>
				</view>
				<view class="main-list-cen" v-if="tabInd == 0">
					<view class="main-list-cen-for" v-if="grade == '总监'">
						<view class="num">{{myTeam.todayServiceProviderFans}}</view>
						<view class="name">服务商</view>
					</view>
					<view class="main-list-cen-for" v-if="grade == '总监' || grade == '服务商'">
						<view class="num">{{myTeam.todayStoreManagerFans}}</view>
						<view class="name">店长</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.todayBigFans}}</view>
						<view class="name">88VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.todayMiddleFans}}</view>
						<view class="name">92VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.todaySmallFans}}</view>
						<view class="name">95VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.todayGeneralFans}}</view>
						<view class="name">注册会员</view>
					</view>
					<block v-if="grade != '店长'">
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for" v-if="grade != '总监'"></view>
					</block>
				</view>
				<view class="main-list-cen" v-else-if="tabInd == 1">
					<view class="main-list-cen-for" v-if="grade == '总监'">
						<view class="num">{{myTeam.yesterdayServiceProviderFans}}</view>
						<view class="name">服务商</view>
					</view>
					<view class="main-list-cen-for" v-if="grade == '总监' || grade == '服务商'">
						<view class="num">{{myTeam.yesterdayStoreManagerFans}}</view>
						<view class="name">店长</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.yesterdayBigFans}}</view>
						<view class="name">88VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.yesterdayMiddleFans}}</view>
						<view class="name">92VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.yesterdaySmallFans}}</view>
						<view class="name">95VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.yesterdayGeneralFans}}</view>
						<view class="name">注册会员</view>
					</view>
					<block v-if="grade != '店长'">
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for" v-if="grade != '总监'"></view>
					</block>
				</view>
				<view class="main-list-cen" v-else-if="tabInd == 2">
					<view class="main-list-cen-for" v-if="grade == '总监'">
						<view class="num">{{myTeam.thisWeekServiceProviderFans}}</view>
						<view class="name">服务商</view>
					</view>
					<view class="main-list-cen-for" v-if="grade == '总监' || grade == '服务商'">
						<view class="num">{{myTeam.thisWeekStoreManagerFans}}</view>
						<view class="name">店长</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisWeekBigFans}}</view>
						<view class="name">88VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisWeekMiddleFans}}</view>
						<view class="name">92VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisWeekSmallFans}}</view>
						<view class="name">95VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisWeekGeneralFans}}</view>
						<view class="name">注册会员</view>
					</view>
					<block v-if="grade != '店长'">
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for" v-if="grade != '总监'"></view>
					</block>
				</view>
				<view class="main-list-cen" v-else-if="tabInd == 3">
					<view class="main-list-cen-for" v-if="grade == '总监'">
						<view class="num">{{myTeam.thisMonthServiceProviderFans}}</view>
						<view class="name">服务商</view>
					</view>
					<view class="main-list-cen-for" v-if="grade == '总监' || grade == '服务商'">
						<view class="num">{{myTeam.thisMonthStoreManagerFans}}</view>
						<view class="name">店长</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisMonthBigFans}}</view>
						<view class="name">88VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisMonthMiddleFans}}</view>
						<view class="name">92VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisMonthSmallFans}}</view>
						<view class="name">95VIP</view>
					</view>
					<view class="main-list-cen-for">
						<view class="num">{{myTeam.thisMonthGeneralFans}}</view>
						<view class="name">注册会员</view>
					</view>
					<block v-if="grade != '店长'">
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for"></view>
						<view class="main-list-cen-for" v-if="grade != '总监'"></view>
					</block>
				</view>
			</view>
			<view class="qiun-charts">
				<view class="qiun-charts-title">{{mydate}} 熊猫小店客户新增趋势图</view>
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			</view>
			<view class="foot" @tap="biandong(mydate)">
				<view class="foot_fl">店铺粉丝变动记录</view>
				<image src='/static/img/arrow-right@2x.png' class="foot_img" mode="widthFix"></image>
			</view>
		</view>	
	</view>
</template>

<script>
	import api from '@/common/api';
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaLineA=null;
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				teamsFlag:false,
				userId:'',
				grade:'',   //等级
				tabInd:0,
				// fansFlag:'',  // 判断是xpa     等于1 公众号
				myTeam:{},
				token:'',
				imgShow:false,
				//图表
				mydate:'',
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		onLoad(options) {
			// console.log(options)
			// if(options.fansFlag != '' && options.fansFlag != null && options.fansFlag != undefined){
			// 	this.fansFlag = true
			// }
			if(options.userId != '' && options.userId != null && options.userId != undefined){
				this.userId = options.userId
			}
			if(options.teamsFlag != '' && options.teamsFlag != null && options.teamsFlag != undefined){
				this.teamsFlag = true
			}
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			// 获取当前年月
			var date=new Date;
			 var year=date.getFullYear(); 
			 var month=date.getMonth()+1;
			 month =(month<10 ? "0"+month:month); 
			 this.mydate = (year.toString()+'-'+month.toString());
			 this.token = uni.getStorageSync('token')
			this.myFans()
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.myFans()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		
		methods: {
			//跳转小熊猫变动
			biandong(mydate){
				uni.navigateTo({
				  url: "/pages/FansDetail/FansDetail?mydate="+mydate
				})
			},
			jumpTeam(memberType){
				if(this.teamsFlag == true){
					return false
				}
				uni.navigateTo({
					url:'/pages/newData/teams?type=1&memberType=' + memberType
				})
			},
			onTab(ind){
				this.tabInd = ind
			},
			async myFans(){
				const [err, res] = await api.myFans({
					query: {
						userId:this.userId
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					 let obj = res.data.myTeam
					 // res.data.myTeam.shopType == 'director
					 // this.myTeam.memberTypeStr='服务商'
					 // this.myTeam.invite.parentUserWeChatCode='wechat/images/logo.png'
					 if(obj.shopType == 'director'){
						 this.grade = '总监'
					 }else if (obj.shopType == 'serviceProvider'){
						 this.grade = '服务商'
					 }else if (obj.shopType == 'storeManager'){
						 this.grade = '店长'
					 }
					 this.myTeam=obj
					this.getFansForMonth()
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					if(res.data.code==200){
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.reLaunch({
							  url: "/pages/login/loginWechat"
							})
						}, 1000);
					}
				 }
			},
			async getFansForMonth(){
				const [err, res] = await api.getFansForMonth({
					query: {
						date:this.mydate,
						isDirectly:0,
						userId:this.userId
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					 let LineA={categories:[],series:[]};
					 //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					 // LineA.categories=res.data.data.LineA.categories;
					 LineA.categories=res.data.data.dateList;
					 LineA.series=[{
						 name: '-总人数新增-',
						 data:res.data.data.allNumList ,
						 color: '#E93246'
					 },{
						 name: '-88VIP新增-',
						 data:res.data.data.bigNumList ,
						 color: '#0099FF'
					 },{
						 name: '-92VIP新增-',
						 data:res.data.data.middleNumList ,
						 color: '#039D56'
					 },{
						 name: '-95VIP新增-',
						 data:res.data.data.smallNumList ,
						 color: '#FCC133'
					 },{
						 name: '-注册会员新增-',
						 data:res.data.data.generalNumList ,
						 color: '#DBC291'
					 }]
					 // _self.textarea = JSON.stringify(res.data.data.LineA);
					 _self.showLineA("canvasLineA",LineA);
				 }
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						position:'top',
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:15,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:8,
						min:0,
						max:30,
						format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					},
				});
				
			},
			touchLineA(e){
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			//显示上级二维码大图
			shareShow(type){
				if(type==1){
					this.imgShow=true
					this.img=this.myTeam.invite.parentUserWeChatCode
				}else if(type==0){
					this.imgShow=true
					this.img=this.myTeam.weChatCode
				}
				
			},
			//隐藏上级二维码大图
			shareHide(){
				this.imgShow=false
			},
		}
	}
</script>
